import React, { PropTypes } from 'react';
import TweenOne from 'rc-tween-one';
import { connect } from 'react-redux'
import { routerRedux } from 'dva/router'
import { Menu, Button, Affix } from 'antd';
import { getWidth } from '../../widgets'

const Item = Menu.Item;

const logImg = require('../../assets/logo.png')
const rwm_saoyisao = require('../../assets/nav/rwm_saoyisao.png')
const rwm_top_erweima = require('../../assets/nav/rwm_top_erweima.jpg')

@connect(({ example }) => ({ ...example }))
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phoneOpen: false,
      showErCode: false,
    };
  }

  phoneClick = () => {
    this.setState({
      phoneOpen: !this.state.phoneOpen,
    });
  }

  render() {
    const props = { ...this.props };
    const isMode = props.isMode;
    delete props.isMode;
    const navData = { menu1: '首页', menu2: '技术方案', menu3: '关于我们'};
    const navChildren = Object.keys(navData)
      .map((key, i) => (<Item key={i}>{navData[key]}</Item>));
    return (
      <Affix>
      <div className="header-outer">
      <TweenOne
      component="header"
      animation={{ opacity: 0, type: 'from' }}
      {...props}
    >
      <TweenOne
        className={`${this.props.className}-logo`}
        animation={{ x: -30, type: 'from', ease: 'easeOutQuad' }}
        id={`${this.props.id}-logo`}
      >
        <img width="100px" src={logImg} />
      </TweenOne>
      {isMode ? (<div
        className={`${this.props.className}-phone-nav${this.state.phoneOpen ? ' open' : ''}`}
        id={`${this.props.id}-menu`}
      >
        <div
          className={`${this.props.className}-phone-nav-bar`}
          onClick={() => {
            this.phoneClick();
          }}
        >
          <em />
          <em />
          <em />
        </div>
        <div
          className={`${this.props.className}-phone-nav-text`}
        >
          <Menu
            defaultSelectedKeys={['0']}
            mode="inline"
            theme=""
          >
            {navChildren}
          </Menu>
        </div>
      </div>) : (
        <TweenOne
          className={`${this.props.className}-nav`}
          animation={{ x: 30, type: 'from', ease: 'easeOutQuad' }}
        >
          <Menu
            mode="horizontal" defaultSelectedKeys={['0']}
            id={`${this.props.id}-menu`}
          >
            {navChildren}
          </Menu>
        </TweenOne>
      )}
      {
        !isMode && (
          <div className={`${this.props.className}-btns`}>
            <Button onClick={() => {
              this.props.dispatch(routerRedux.push("/tech"))
              console.log(this.props)
            }} style={{fontSize: "14px", borderRadius: 45, width: "80px", height: "28px", backgroundColor: '#2fa9ff', borderColor: '#2fa9ff', color: 'white'}}>登录</Button>
            <Button style={{fontSise: "14px", borderRadius: 45, width: "80px", height: "28px"}}>注册</Button>
            <img style={{height: "28px", "marginLeft": "15px", }} onClick={() => { this.setState({
              showErCode: !this.state.showErCode
            })}} src={rwm_saoyisao} />
          </div>
        )
      }
      {
        this.state.showErCode && (
          <img style={{position: "relative", top: "80px", marginLeft: "-93px"}} src={rwm_top_erweima} />
        ) || (
          <div style={{position: "relative", top: "80px"}}></div>
        )
      }
      </TweenOne>
      </div>
      </Affix>);
  }
}

Header.propTypes = {
  className: PropTypes.string,
  dataSource: PropTypes.object,
  id: PropTypes.string,
};

Header.defaultProps = {
  className: 'header0',
};

export default Header;
